<!-- 管理员权限管理 -->
<template>
    <div class="user-management">
        <el-card>
            <el-button type="primary" @click="addAdmin" icon="avatar">新增管理员</el-button>
            <Search @getUserList="getAdminList" :paginationData="paginationData"></Search>
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" max-height="460px">
                    <el-table-column label="序号" type="index" width="80px" align="center">
                    </el-table-column>
                    <el-table-column prop="avatarUrl" label="头像" width="100px">
                        <template #default="scope">
                            <img :src="scope.row.avatarUrl" alt="" style="width: 50px;height:50px;border-radius: 50%;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="userAccount" label="账号" width="160px" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="username" label="昵称" width="150px" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="roleName" label="角色" width="150px" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="userTel" label="电话" width="120px" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="180px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.isSuperAdmin !== 1" size="small" type="primary"
                                @click="handleEdit(scope.row)" icon="Edit">编辑</el-button>

                            <el-popconfirm v-if="scope.row.isSuperAdmin !== 1" title="您确定删除该账号吗?"
                                @confirm="handleDelete(scope.row)" icon="Delete" icon-color="red" width="220px">
                                <template #reference>
                                    <el-button size="small" type="danger" icon="Delete">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <!-- 分页器 -->
                    <Pagination :paginationData="paginationData" @getInfo="getAdminList"></Pagination>
                </div>
            </div>
            <UserDialog @changeUserRole="changeUserRole" :paginationData="paginationData"></UserDialog>
        </el-card>
        <AddAdminDialog @getAdminList="getAdminList"></AddAdminDialog>
    </div>
</template>

<script setup lang="ts">
import Search from '../../components/search/index.vue'
import Pagination from '../../components/pagination/index.vue'
import UserDialog from './dialog/index.vue'
import AddAdminDialog from './add_dialog/index.vue'
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import $bus from '../../bus';
import { reqDeleteAdmin, reqGetAdminList, reqUpdateUserRole } from '../../api/user';
import { AllUserInfo, GetPageData, UpdateUserRoleData, UserInfo } from '../../api/user/type';

// 表格数据
let tableData = ref<AllUserInfo>([])
let key = ref('')
// 存储接口返回的分页器数据
let paginationData = ref({})
onMounted(() => {
    getAdminList()

})
//获取全部 管理员 信息
const getAdminList = async (currentpage = 1, pagesize = 10, keyword = '') => {
    key.value = keyword
    let data: GetPageData = {
        pageSize: pagesize,
        currentPage: currentpage,
        keyword
    }

    let result: any = await reqGetAdminList(data)
    if (result.code == 20000) {
        tableData.value = result.data.list
        paginationData.value = result.data
    }
}
const handleEdit = (row: UserInfo) => {
    $bus.emit('showDialog', {
        isShow: true,
        row
    })

}
// 修改角色
const changeUserRole = async (data: UpdateUserRoleData) => {
    let result: any = await reqUpdateUserRole(data)
    if (result.code == 20000) {
        // 重新获取 用户 信息
        getAdminList(paginationData.value?.currentPage)
        ElMessage({
            type: 'success',
            message: '修改成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '修改失败'
        })
    }
}
// 删除账户 
const handleDelete = async (row: UserInfo) => {
    let result: any = await reqDeleteAdmin(row.userId as number)
    if (result.code == 20000) {
        // 重新获取 用户 信息
        getAdminList(paginationData.value?.currentPage)
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }

}
// 新增管理员 
const addAdmin = () => {
    $bus.emit('add', true)
}
</script>

<style lang="scss" scoped>
.user-management {
    .el-form {
        padding: 20px 30px;
    }

    .table {
        margin: 10px 0;

        .el-table {
            font-size: 13px !important;
        }
    }

    .pagination {
        margin-top: 20px;

    }
}
</style>
